<template>
  <div class="home-container">
    <!-- 头部导航 -->
    <van-nav-bar class="page-nav-bar" fixed>
      <template #title>
        <van-button type="info" round size="small" icon="search" class="search-btn" to="/search">搜索</van-button>
      </template>
    </van-nav-bar>
    <!-- 频道列表
          v-model 表示绑定当前激活标签对应的索引值，默认选中第一个
          animated 转场动画 在标签中直接写某个属性名如 animated === :animated="true"
          swipe-threshold 滚动阈值，表示最低滑动的标签数 标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动
          title 表示的是页面上的标题内容
          <van-tab>标签中设置内容区域 后续设置的表格数据放置在双标签中
        -->
    <van-tabs class="channel-tabs" v-model="active" animated swipe-threshold="3">
      <van-tab v-for="channel in userChannels" :key="channel.id" :title="channel.name">
        <articleList :channelId="channel.id"></articleList>
      </van-tab>
      <!--汉堡包 图标-->
      <template #nav-right>
        <div class="placeholder"></div>
        <div class="hamburger-btn" @click="isChannelEditShow=true">
          <i class="toutiao toutiao-gengduo"></i>
        </div>
      </template>
    </van-tabs>
    <!-- 弹框的代码区域 一般写在template模板的最下面 -->
    <van-popup v-model="isChannelEditShow" position="bottom" :style="{ height: '100%' }"
               closeable close-icon-position="top-left" class="channel-edit-popup">
      <!--  频道 编辑  -->
      <channelEdit :myChannels="userChannels" :active="active" :allChannels="allChannels"
                   @update-active="updateActiveFn"></channelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelAPI } from '../../api/index.js'
import articleList from './components/article-list.vue'
import channelEdit from './components/channel-edit.vue'
import { getItem } from '../../utils/storage.js'

export default {
  name: 'HomeIndex',
  components: {
    articleList,
    channelEdit
  },
  data () {
    return {
      active: 0,
      userChannels: [],
      allChannels: [],
      isChannelEditShow: false
    }
  },
  created () {
    // 获取用户频道列表
    this.loadUserChannels()
    // 获取全部频道列表
    this.loadAllChannels()
  },
  methods: {
    async loadUserChannels () {
      try {
        if (this.$store.state.user.token || !getItem('TOUTIAO_MYCHANNELS')) {
          // 登录或者本地没有接口时 需要调用接口
          const { data: res } = await getUserChannelsAPI()
          this.userChannels = res.data.channels
        } else {
          this.userChannels = getItem('TOUTIAO_MYCHANNELS')
        }
      } catch (err) {
        console.log(err)
      }
    },
    async loadAllChannels () {
      try {
        const { data: res } = await getAllChannelAPI()
        console.log(res)
        this.allChannels = res.data.channels
      } catch (err) {
        console.log(err)
      }
    },
    // 更新选中频道
    updateActiveFn (index, flag = false) {
      // 当flag为true时，不用关闭弹框
      // 切换频道
      this.active = index
      // 关闭弹框
      if (!flag) {
        this.isChannelEditShow = false
      }
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  padding-top: 90px;
  padding-bottom: 50px;

  :deep(.van-nav-bar__title) {
    max-width: unset;

    .search-btn {
      background-color: #5cacfb;
      border: none;
      width: 300px;
    }
  }

  :deep(.channel-tabs) {
    .van-tabs__wrap {
      width: 100%;
      z-index: 2;
      position: fixed;
      top: 46px;
    }

    .van-tab {
      width: 100px;
      border-right: 1px solid #f3f3f3;
    }

    .van-tabs__line {
      background-color: deeppink;
      height: 4px;
      width: 16px;
    }

    .placeholder {
      flex-shrink: 0; /* 让当前元素不参与flex布局计算 */
      width: 32px;
      height: 44px;
    }

    .hamburger-btn {
      z-index: 1;
      position: fixed;
      right: 0;
      background-color: #ffffff;
      width: 32px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;

      &::before {
        content: '';
        background-image: url('../../assets/gradient-gray-line.png');
        width: 1px;
        height: 44px;
        position: absolute;
        left: 0;
      }
    }
  }

  .channel-edit-popup {
    padding-top: 50px;
    box-sizing: border-box;
  }
}
</style>
